<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>v-for指令</h2>
    <p>用于循环生成HTML标签的指令。</p>
    <main id="app">
        <ul>
            <li v-for="item in arr1">{{item}}</li>
        </ul>
        <h3>学生列表</h3>
        <ul>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>电话</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,idx) in arr2">
                        <td>{{idx + 1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.sex == '1' ? "男" : "女"}}</td>
                        <td>{{item.tel}}</td>
                    </tr>
                </tbody>
            </table>
        </ul>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            arr1: [
                "葱",
                "姜",
                "蒜"
            ],
            arr2: [
                {name: "奉先",sex: 1,tel:"13547811112"},
                {name: "龙雪",sex: 2,tel:"13547811113"},
                {name: "陈科地",sex: 1,tel:"13547811114"}
            ]
        }
    })
</script>
</html>